import React, { useCallback } from 'react';
import { history } from 'umi';
import { Button, Layout, Space, Modal, Dropdown, Menu } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

import * as Api from '@/apis/index';

import S from './index.less';

export default props => {
  const { accountInfo } = props;
  const onLogout = useCallback(() => {
    Modal.confirm({
      title: '警告',
      icon: <ExclamationCircleOutlined />,
      content: '确定要退出登录吗？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        await Api.logout();
        history.replace('/login');
      },
      onCancel() {},
    });
  }, []);
  return (
    <Layout.Header className={S.header}>
      <div className={S.title}>{accountInfo && accountInfo.name}</div>
      <Dropdown
        overlay={
          <Menu>
            <Menu.Item>
              <Button type="link" danger onClick={onLogout}>
                退出登录
              </Button>
            </Menu.Item>
          </Menu>
        }
      >
        <Button type="link">
          <Space>
            <img
              style={{ height: 24, width: 24 }}
              src={require('@/assets/layout/avatar.png')}
            />
            <span style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.65)' }}>
              {accountInfo && accountInfo.name}
            </span>
          </Space>
        </Button>
      </Dropdown>
    </Layout.Header>
  );
};
